import { timer } from "./timer.js"
const bg_table = {
    'bg-day': {
        url: "/img/day1.jpg",
        description: {
            name: "帯広_緑ヶ丘公園", author: "ヤマケン@pixiv.net", href: "https://www.pixiv.net/artworks/130930120"
        }
    }, 
    'bg-day2': {
        url: "/img/day2.jpg",
        description: {
            name: "和琴半島", author: "ヤマケン@pixiv.net", href: "https://www.pixiv.net/artworks/130617309"
        }
    },
    'bg-afternoon': {
        url: "/img/afternoon.jpg",
        description: {
            name: "coffee", author: "unknown", href: ""
        }
    },
    'bg-twilight': {
        url: "/img/twilight.jpg",
        description: {
            name: "春がきた",
            author: "Uomi@pixiv.net",
            href: "https://www.pixiv.net/artworks/127711634"
        }
    },
    'bg-night': {
        url: "/img/night.jpg",
        description: {
            name: "Phase Gazing",
            author: "Uomi@pixiv.net",
            href: "https://www.pixiv.net/artworks/104886031"
        }
    },
}


export async function processRenderBG() {
    const backgroundClassName = compute_bg_class()
    const backgroundInstance = bg_table[backgroundClassName]
    const transmitResult = await timer(backgroundInstance.url)
    ////////// render bg //////////
    document.getElementById('app-bg').style.backgroundImage = `url(${transmitResult.blob_url})`;
    ////////// render bg text //////////
    const bg_text_node = document.createElement('div')
    bg_text_node.innerHTML = `<p><a href="${backgroundInstance.description.href}" target="_blank">${backgroundInstance.description.name}</a>&emsp;${backgroundInstance.description.author}</p>`
    document.getElementById('app-bg-description').insertAdjacentElement('beforeend', bg_text_node)
    ////////// render speed text //////////
    await sleep(1000)
    const text_node = document.getElementById("timer")
    let ti = transmitResult.duration.toFixed(2)
    if (ti > 1000) {
        ti = (ti / 1000).toFixed(2) + "s"
    } else {
        ti = ti + "ms"
    }
    let sp = transmitResult.speed / 1024 //KiB/s
    if (sp > 1024) {
        sp = (sp / 1024).toFixed(1) + "MiB/s"
    } else {
        sp = sp.toFixed(1) + "KiB/s"
    }
    text_node.innerHTML =
        `<p><span class="item">Received: ${parseInt(transmitResult.fileSize / 1024)}KiB</span>
        <span class="item">Latency: ${parseInt(transmitResult.latency.toFixed(1))}ms</span>
        <span class="item">Duration: ${ti}</span>
        <span class="item">Speed: ${sp}</span></p>`
}

const sleep = (delay) => new Promise((resolve) => setTimeout(() => { console.log(`Slept ${delay}ms`); resolve() }, delay))

export function compute_bg_class() {
    const h = new Date().getHours()
    if (h > 6 && h < 13) {
        return 'bg-day'
    } else if (h >= 13 && h < 17) {
        return 'bg-afternoon'
    } else if (h >= 17 && h < 19) {
        return 'bg-twilight'
    } else {
        document.getElementById('app').classList.add('night')
        return 'bg-night'
    }
}